import React from "react";
import 可浇筑材料1 from "./可浇筑材料1.png";
import { allStore } from "../../../../store/AllStore";
import { Button, Modal, Table } from "antd";

export class CastableMaterial extends React.Component {
  onView(dataSource, columns) {
    Modal.info({
      icon: null,
      okText: allStore.isEnglish ? "Close" : "关闭",
      title: allStore.isEnglish ? "Detailed Information" : "详细信息",
      content: (
        <div>
          <Table
            style={{ height: 400 }}
            scroll={{ y: 350 }}
            bordered
            pagination={false}
            dataSource={dataSource}
            columns={columns}
          ></Table>
        </div>
      ),
      width: 960,
    });
  }
  render() {
    const columns = [
      {
        title: allStore.isEnglish ? "Item" : "分类",
        dataIndex: "Item",
        key: "Item",
      },
      {
        title: "LACD45",
        dataIndex: "LACD45",
        key: "LACD45",
      },
      {
        title: "LACD55",
        dataIndex: "LACD55",
        key: "LACD55",
      },
      {
        title: "LACD60",
        dataIndex: "LACD60",
        key: "LACD60",
      },

      {
        title: "LACD65",
        dataIndex: "LACD65",
        key: "LACD65",
      },
    ];
    const dataSource = [
      {
        Item: allStore.isEnglish ? "Service Temp ℃" : "服务温度℃",
        LACD45: "1400",
        LACD55: "1450",
        LACD60: "1500",
        LACD65: "1550",
      },
      {
        Item: allStore.isEnglish
          ? "Bulk Density (g/cm3)  (Dried at 110℃)"
          : "堆积密度（g/cm3）（110℃干燥）",
        LACD45: "2.2",
        LACD55: "2.2",
        LACD60: "2.3",
        LACD65: "2.35",
      },
      {
        Item: (
          <>
            <p>CCS 110℃</p>
            <p>(Mpa) 1100℃</p>
            <p>           150</p>
            <p>0 ℃</p>
          </>
        ),
        LACD45: (
          <>
          <p> </p>
            <p>45</p>
            <p>40</p>
            <p>-</p>
          </>
        ),
        LACD55: (
          <>
          <p> </p>
            <p>47</p>
            <p>42</p>
            <p>-</p>
          </>
        ),
        LACD60: (
          <>
          <p> </p>
            <p>50</p>
            <p>45</p>
            <p>65</p>
          </>
        ),
        LACD65: (
          <>
          <p> </p>
            <p>50</p>
            <p>45</p>
            <p>68</p>
          </>
        ),
      },
      {
        Item: (
          <>
            <p>MOR 110℃</p>
            <p>(Mpa) 1100℃</p>
            <p>           1500℃</p>
          </>
        ),
        LACD45: (
          <>
            <p>45</p>
            <p>40</p>
            <p>-</p>
          </>
        ),
        LACD55: (
          <>
            <p>47</p>
            <p>42</p>
            <p>-</p>
          </>
        ),
        LACD60: (
          <>
            <p>50</p>
            <p>45</p>
            <p>65</p>
          </>
        ),
        LACD65: (
          <>
            <p>50</p>
            <p>45</p>
            <p>68</p>
          </>
        ),
      },
      {
        Item: allStore.isEnglish ? "Max Grain Size (mm)" : "最大粒径（mm）",
        LACD45: 6,
        LACD55: 6,
        LACD60: 6,
        LACD65: 6,
      },
      {
        Item: (
          <>
            <p>
              {allStore.isEnglish ? "Chemical Analysis(%)" : "化学分析（%）"}
            </p>
            <p>Al2O3</p>
            <p>Fe2O3</p>
          </>
        ),
        LACD45: (
          <>
            <p> </p>
            <p>45</p>
            <p>2.0</p>
          </>
        ),
        LACD55: (
          <>
            <p> </p>
            <p> </p>
            <p>50</p>
            <p>2.5</p>
          </>
        ),
        LACD60: (
          <>
            <p> </p>
            <p> </p>
            <p>60</p>
            <p>2.5</p>
          </>
        ),
        LACD65: (
          <>
            <p> </p>
            <p> </p>
            <p>65</p>
            <p>2.3</p>
          </>
        ),
      },
      {
        Item: (
          <>
            <p>
              {allStore.isEnglish ? "Application Guidelines" : "应用指南"}
            </p>
            <p>
              {allStore.isEnglish ? "Mixer" : "混频器"}
            </p>
            <p>
              {allStore.isEnglish ? "Placement" : "安置"}
            </p>
            <p>
              {allStore.isEnglish ? "Water/Mixer" : "水/混合器"}
            </p>
            <p>
              {allStore.isEnglish ? "Temp℃/Mixing" : "温度℃/混合"}
            </p>
            <p>
              {allStore.isEnglish ? "Time(Min):Dry/Wet" : "时间（分钟）：干/湿"}
            </p>
           
          </>
        ),
        LACD45: (
          <>
            <p> </p>
            <p> </p>
            <p>P</p>
            <p>R/V/T</p>
            <p>20±5</p>
            <p>2/5</p>
          </>
        ),
        LACD55: (
          <>
            <p> </p>
            <p> </p>
            <p>P</p>
            <p>R/V/T</p>
            <p>20±5</p>
            <p>2/5</p>
          </>
        ),
        LACD60: (
          <>
            <p> </p>
            <p> </p>
            <p>P</p>
            <p>R/V/T</p>
            <p>20±5</p>
            <p>2/5</p>
          </>
        ),
        LACD65: (
          <>
            <p> </p>
            <p> </p>
            <p>P</p>
            <p>R/V/T</p>
            <p>20±5</p>
            <p>2/5</p>
          </>
        ),
      },
      {
        Item: allStore.isEnglish ? "Water % (Typical)" : "“水百分比（典型值）",
        LACD45: "11-13",
        LACD55: "11-13",
        LACD60: "9-11",
        LACD65: "9-11",
      },
    ];
    return (
      <div id="castable-material" className="pcd-mod-layout">
        <div
          style={{
            width: 1080,
            display: "flex",
            alignItems: "center",
          }}
        >
          <div style={{ width: 470, height: 300 }}>
            <div
              style={{
                textAlign: "start",
                fontSize: 24,
                color: "#000",
                marginBottom: 24,
              }}
            >
              {allStore.isEnglish ? "Castable material" : "可浇筑材料"}
            </div>
            <div style={{ textAlign: "start", marginBottom: 24 }}>
              {allStore.isEnglish
                ? "Conventional Dense castable is mixed by high quality bauxite, flint clay as aggregate, Silica Powder, α-alumina powder as micro powder, refractory cement as binder. Formulas are changed according to different applications. TSCD series products are specially designed to use for steel industry, boiler furnaces, incinerators and other industrial Conventional Dense castable is mixed by high quality bauxite, flint clay as aggregate, Silica Powder, α-alumina powder as micro powder, refractory cement as binder. Formulas are changed according to different applications. TSCD series products are specially designed to use for steel industry, boiler furnaces, incinerators and other industrial"
                : "传统的致密浇注料是由优质铝土矿、燧石粘土为骨料、二氧化硅粉末、α-氧化铝粉末为微粉、耐火水泥为粘结剂混合而成。公式会根据不同的应用程序进行更改。TSCD系列产品专为钢铁工业、锅炉炉、焚烧炉等工业而设计传统的致密浇注料是由优质铝土矿、燧石粘土为骨料、二氧化硅粉末、α-氧化铝粉末为微粉、耐火水泥为粘结剂混合而成。公式会根据不同的应用程序进行更改。TSCD系列产品专为钢铁工业、锅炉炉、焚烧炉等工业而设计"}
            </div>
            <div style={{ textAlign: "start" }}>
              <Button type="primary" onClick={() => this.onView(dataSource, columns)}>
                {allStore.isEnglish ? "View details" : "查看详情"}
              </Button>
            </div>
          </div>
          <img
            style={{ width: 470, marginLeft: 140 }}
            alt=""
            src={可浇筑材料1}
          ></img>
        </div>
      </div>
    );
  }
}
